<template>
  <v-col cols="6">
    <div class="bottom-list-items">
      <div class="bottom-list-item">{{modelName}}</div>
      <v-data-table
        :headers="headerss"
        :items="val"
        :page.sync="page"
        :items-per-page="itemsPerPage"
        hide-default-footer
        hide-default-header
        class="elevation-1 box"
        loading-text="暂无数据"
        dense
        @page-count="pageCount = $event"
        @click:row="particularsClick($event)"
      ></v-data-table>
      <div class="text-center pt-2">
        <v-pagination v-model="page" :length="pageCount"></v-pagination>
      </div>
    </div>
  </v-col>
</template>

<script>
export default {
  props: {
    modelName: {
      type: String,
      default: "NEW 最新一周新发布文件",
    },
    val: {
      type: Array,
      default: function () {
        return [
          {
            name: "Frozen Yogurt"
          },
          {
            name: "Frozen Yogurt"
          },
          {
            name: "Frozen Yogurt"
          },
          {
            name: "Frozen Yogurt"
          },
          {
            name: "Frozen Yogurt"
          },
          {
            name: "Frozen Yogurt"
          },
        ];
      },
    },
  },
  data() {
    return {
      headerss: [
        {
          text: "Dessert (100g serving)",
          align: "start",
          sortable: false,
          value: "name",
        },
      ],
      page: 1,
      pageCount: 0,
      itemsPerPage: 5,
    };
  },
  methods: {
    particularsClick(item) {
      console.log(item);
    },
  },
};
</script>

<style lang="scss">
.box {
  min-height: 168px;
}
.v-application .elevation-1 {
  box-shadow: none !important;
}
.bottom-list-items {
  border: 2px solid rgb(65, 113, 156);
  border-radius: 5px;
  .bottom-list-item {
    background: rgb(32, 56, 100);
    color: #fff;
    padding: 5px;
    font-size: 14px;
  }
}
</style>